<template>
    <div>
        <a-modal
            title="查看"
            :visible="visible"
            width="100%"
            wrapClassName="full-modal"
            @cancel="visible = false"
        >
            <div class="two-products-one-device" :key="productsDevice">
                <div style="text-align:center;">
                    <h1>全区技术审评审评员重新登记</h1>
                </div>
                <table border="1" style="font-size: 18px;margin: 0 10%;">
                    <tr>
                        <td class="first-col" style="text-align: center;">姓名</td>
                        <td class="ab-v">{{ djbData.realname }}</td>
                        <td class="first-col" style="text-align: center;">性别</td>
                        <td class="ab-v">{{ djbData.sex ? (djbData.sex=='1'?'男':'女'):'' }}</td>
                        <td class="first-col" style="text-align: center;">出生年月</td>
                        <td class="ab-v">{{ djbData.birthday }}</td>
                        <td class="first-col" style="text-align: center;">民族</td>
                        <td class="ab-v">{{ djbData.fmz }}</td>
                        <td style="width: 200px; text-align: center;" >政治面貌</td>
                        <td colspan="2" class="ab-v">{{ djbData.fzzmm }}</td>
                    </tr>
                    <tr>
                        <td class="first-col" style="text-align: center;">身份证号</td>
                        <td colspan="3" class="ab-v">{{ djbData.fsfzh }}</td>
                        <td style="text-align: center;">学历</td>
                        <td class="ab-v">{{ djbData.fxl }}</td>
                        <td style="text-align: center;">职称</td>
                        <td class="ab-v">{{ djbData.fzc }}</td>
                        <td style="text-align: center;">职务</td>
                        <td colspan="2" class="ab-v">{{ djbData.fzw }}</td>
                    </tr>
                    <tr>
                        <td class="first-col" style="text-align: center;">毕业院校</td>
                        <td colspan="4" class="ab-v">{{ djbData.fbyyx }}</td>
                        <td style="text-align: center;">所学专业</td>
                        <td colspan="2" class="ab-v">{{ djbData.fsxzy }}</td>
                        <td>现在从事或分管工作</td>
                        <td colspan="2" class="ab-v">{{ djbData.fcsgz }}</td>
                    </tr>
                    <tr>
                        <td class="first-col">工作单位及部门</td>
                        <td colspan="7" class="ab-v">{{ djbData.fgzdw }}</td>
                        <td>从事技术审评工作年限</td>
                        <td colspan="2" class="ab-v">{{ djbData.fgznx }}</td>
                    </tr>
                    <tr>
                        <td class="first-col" rowspan="2">联系方式</td>
                        <td colspan="3" style="text-align: center;">单位地址</td>
                        <td colspan="2" style="text-align: center;">手机</td>
                        <td style="text-align: center;">传真号码</td>
                        <td colspan="2" style="text-align: center;">QQ号</td>
                        <td colspan="2" style="text-align: center;">Email</td>
                    </tr>
                    <tr>
                        <td class="ab-v" colspan="3" >{{ djbData.fgzdwdz }}</td>
                        <td colspan="2" class="ab-v">{{ djbData.phone }}</td>
                        <td class="ab-v">{{ djbData.fcz }}</td>
                        <td colspan="2" class="ab-v">{{ djbData.fqqhm }}</td>
                        <td colspan="2" class="ab-v">{{ djbData.email }}</td>
                    </tr>
                    <tr>
                        <td class="first-col">审评类型</td>
                        <td colspan="10" class="ab-v">
                            <div v-for="(item,index) in lbList" :key="index" v-if="lbList.length">
                                <a-checkbox :checked="item.fxzzt" @change="onLbChange(item)" disabled>
                                    {{ item.lb.fjcylb }}，近三年参加审评（{{item.fcjcs?item.fcjcs:'无'}}）次
                                </a-checkbox>
                                <div style="margin: 5px 28px;display:flex;" v-if="item.typeList">
                                    <h5>特长：</h5>
                                    <a-checkbox-group :defaultValue="item.fjctz"  disabled>
                                        <span v-for="(trem,tIndex) in item.typeList.split(',')" :key="index" >
                                            <a-checkbox :value="trem" >{{ trem }}</a-checkbox>
                                        </span>
                                    </a-checkbox-group>
                                </div>
                                <span v-else>无</span>
                            </div>
                            <span v-else>无</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="first-col">工作简历</td>
                        <td colspan="10" class="ab-v">
                            <div v-if="gzjlList.length">
                                <div  v-for="(item,index) in gzjlList" :key="index">
                                    <span>{{ item.fgzkssj }}</span>至<span>{{ item.fgzjssjstr }}</span>&nbsp;&nbsp;&nbsp;
                                    <span>{{ item.fgzdw }}</span>&nbsp;&nbsp;&nbsp;<span>{{ item.fcsgz }}{{ item.fzw }}</span>
                                </div>
                            </div>
                            
                            <span v-else>无</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="first-col">曾发表过技术审评相关文章</td>
                        <td colspan="10" class="ab-v">
                            <div v-if="wzList.length">
                                <div v-for="(item,index) in wzList" :key="index">
                                    <span>{{ item.ffbsj }}</span>&nbsp;&nbsp;&nbsp;
                                    <span>{{ item.fqkmc }}</span>&nbsp;&nbsp;&nbsp;<span>{{ item.fwzmc }}</span>
                                </div>
                            </div>
                            <span v-else>无</span>
                            
                        </td>
                    </tr>
                    <tr>
                        <td class="first-col" style="text-align: center;">单位意见</td>
                        <td colspan="10" class="ab-v">
                            {{ djbData.fdwyj }}
                        </td>
                    </tr>
                </table>
            </div>
            <template slot="footer">
                <div style="background:#fff;">
                    <a-button @click="visible = false" type="primary" style="margin-right: 10px;">关闭</a-button>
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script>
import {
    spcyJcydjbQueryDjbById,
} from './service/index'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            djbData:{},
            visible:false,
            productsDevice:null,
            gzjlList:[],
            wzList:[],
            lbList:[],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            spcyJcydjbQueryDjbById({id:val}).then(res=>{
                if(res.code == 200){
                    this.djbData = res.result.djb
                    this.gzjlList = res.result.gzjlList
                    this.wzList = res.result.wzList
                    this.lbList = res.result.lbList.map(item=>{ return {
                        ...item,
                        fxzzt:item.lb.fxzzt=='1'?true:false,fcjcs:item.lb.fcjcs == '0'?'':item.lb.fcjcs,
                        fjctz:item.lb.fjctz?item.lb.fjctz.split(','):''
                    }})
                    this.productsDevice = Date.now()
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
    }
}
</script>
<style lang="less">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    background:#fff;
  }
  .ant-modal-body {
    flex: 1;
    background:#fff;
  }
  .ant-modal-footer{
    background:#fff;
  }
}
.two-products-one-device{
    display: flex;
    align-items: center;
    flex-direction: column;
    font-weight:600;
    .first-col{
        padding: 15px;
        width: 105px;
    }
    td{
        padding:10px;
    }
    .ant-checkbox-disabled + span,.ant-input-disabled{
        color:rgba(0, 0, 0, 0.65);
    }
    .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner:after {
        border-color: #2F54EB !important;
    }
    .ab-v{
        font-weight: 400 !important;
    }
}

</style>